<template>
  <div class="mb20">
    <jxf-titletip title="提现详情" :hasRefresh="false" :hasGoBack="true"
                  @goBack="$emit('update:isShowDetail', false)"></jxf-titletip>
    <h4 class="mt20">订单信息</h4>
    <jxf-datalist class="mt20" :info="withdrawInfoList" :lineNum="2"></jxf-datalist>
    <h4 class="mt20">审核信息</h4>
    <jxf-datalist class="mt20" :info="auditInfoList">
      <template slot="reason" slot-scope="scope">
        <el-form v-if="auditStatus === 0" @submit.native.prevent  ref="auditInfo" :rules="rules" :model="auditInfo" class="ml20">
          <el-form-item prop="reason">
            <el-input type="textarea" v-model="auditInfo.reason"
                      :autosize="{ minRows: 3, maxRows: 8}"></el-input>
          </el-form-item>
        </el-form>
        <span v-else>{{scope.info.value}}</span>
      </template>
    </jxf-datalist>
    <div class="mt20 text-center">
      <el-button type="info" @click="$emit('update:isShowDetail', false)">返回</el-button>
      <label v-if="auditStatus === 0" class="ml20">
        <el-button type="danger" @click="auditBalanceApply(2,'auditInfo')">审核驳回</el-button>
        <el-button type="primary" @click="auditBalanceApply(1,'auditInfo')">审核通过</el-button>
      </label>
    </div>
  </div>
</template>

<script>
  import formatDate from '@/assets/js/formatDate'

  export default {
    name: "AdvanceTransferSettlementDetail",
    props: {
      isShowDetail: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        auditStatus:null,
        auditInfo:{
          id:null,
          reason:""
        },
        withdrawInfoList:[],
        auditInfoList:[],
        rules:{
          reason:[
            {required: true, message: '请输入审核备注', trigger: 'blur'},
            {validator: validate.length150, trigger: 'change'}
          ]
        }
      }
    },
    methods: {
      getInfo(id){
        ajax.get(apis.factory.getWithdrawDetail, {id: id})
          .then(res => {
            if (res.success === true) {
              if (res.data !== [] && res.data !== null) {
                this.status = res.data.auditStatus
                this.auditInfo.id = res.data.id
                this.formatData(res.data)
              } else {
                this.withdrawInfoList = []
                this.auditInfoList = []
              }
            }
          })
      },
      formatData(item) {
        this.auditStatus = item.auditStatus
        this.withdrawInfoList = [{
          label: "提现订单编号",
          value: item.applyNo
        }, {
          label: "代付方式",
          value: item.channel === 1 ? "通联" : ''
        }, {
          label: "订单金额",
          value: item.amount !== null && item.amount !== '' ? '￥' + item.amount : ""
        }, {
          label: "收款人姓名",
          value: item.ownerName
        }, {
          label: "手续费",
          value: item.chargeAmount !== null && item.chargeAmount !== '' ? '￥' + item.chargeAmount : ""
        }, {
          label: "银行卡号",
          value: item.cardNo
        }, {
          label: "申请提现时间",
          value: item.applyTime !== null && item.applyTime !== "" ? formatDate.timeFormat(item.applyTime) : ""
        }, {
          label: "开户行",
          value: item.bankName
        }]
        this.auditInfoList = [{
          label: "审核状态",
          value: item.auditStatus  === 0 ? '待审核' : item.auditStatus  === 1 ? '已通过' : item.auditStatus  === 2 ? '已驳回' : ""
        },{
          label: "审核备注",
          type: "reason",
          value: item.reason
        }]
      },
      auditBalanceApply(status,formName) {
        this.auditInfo = {...this.auditInfo,status:status}
        this.$refs[formName].validate((valid) => {
          if (valid) {
            ajax.post(apis.factory.auditBalanceApply, this.auditInfo)
              .then(res => {
                if (res.success === true) {
                  this.$message({
                    message: res.message,
                    type: 'success'
                  });
                  this.getInfo(this.auditInfo.id)
                  this.$emit('getList')
                } else {
                  this.$message({
                    message: res.message,
                    type: 'error'
                  })
                }
              })
          }
          else {
            return false;
          }
        })
      }
    },
    created() {
    }
  }
</script>

<style lang="scss" scoped>

</style>
